<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	
	
	xmlns:composite="http://xmlns.jcp.org/jsf/composite">

<!-- INTERFACE -->
<composite:interface name="tileSmallPictureTitle"
	shortDescription="Provides a small tile with image and title only. On mouse-over, the teaser or full title appears.">
	<composite:attribute name="pubId" required="true" type="java.lang.Long" />
	<composite:attribute name="isVerticalStacked" default="true"
		type="java.lang.Boolean" />
</composite:interface>

<!-- IMPLEMENTATION: REUSABLE FOR CREATE AND UPDATE ACTIONS-->
<composite:implementation
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets">

	<div class="tile tileSmallPictureTitle">
		#{pubController.init(cc.attrs.pubId)}
		<c:choose>
			<c:when test="#{cc.attrs.isVerticalStacked == true}">
				<div class="vertical"></div>
			</c:when>
			<c:otherwise>
				<div class="horizontal">

					<div class="preview" id="preview_#{pubController.id}">
						<div class="tileImage" id="tileImage_#{pubController.id}">
							
						</div>
						<div class="title">
							<ui:remove>Need another div, because padding doesn't work with %-width in parent tag.</ui:remove>
							<div class="paddingBox">
								#{pubController.title}
								<div class="metaData">
									<h:panelGroup rendered="#{not empty pubController.dateCreated}">
										<h:outputText value="#{pubController.dateCreated}"
											styleClass="date">
											<f:convertDateTime pattern="MMMM d yyyy" type="date" />
										</h:outputText>
									</h:panelGroup>
									<h:panelGroup rendered="#{not empty pubController.location}">
										<span>#{pubController.location}</span>
									</h:panelGroup>
									<h:panelGroup rendered="#{not empty pubController.mediaSource}">
										<span>#{pubController.mediaSource}</span>
									</h:panelGroup>
								</div>
							</div>
						</div>
					</div>

					<div class="details" id="details_#{pubController.id}">
						<div class="teaser">#{pubController.teaser}</div>
					</div>
				</div>

				<script>				
				$(document).ready( function () {
					$('#preview_#{cc.attrs.pubId}').animateTSPT({
						previewId: '#preview_#{cc.attrs.pubId}',
						 detailId: '#details_#{cc.attrs.pubId}',
						 tileImageId: '#tileImage_#{cc.attrs.pubId}'
						 })
				 });
				</script>
			</c:otherwise>
		</c:choose>

	</div>
</composite:implementation>
</html>